用Swift开发iOS10 - 5 Stack View设计UI

发表于 | 分类于 | | 阅读次数:
字数统计: 653 | 阅读时长 ≈ 2

项目介绍

image-20190304213443271

参考链接：https://www.jianshu.com/p/25f062e903cf

作者：Andy_Ron

这篇文章将学习到：

  • 用Stack View布局UI。
  • 用image views展示图片。
  • 用内建的asset catalog管理图片。
  • 用Size Classes适配Stack View

Stack View是什么

Stack View为在纵向或横向布置一个视图的集合，提供了一个流线型界面。可以用stack view将很多UI对象合成一个。视图嵌入一个stack view里以后,就不再需要定义自动布局约束.

Stack View管理它子视图的布局,然后自动提供布局约束。这意味着子视图已经准备好去适应不同的屏幕尺寸。此外，也可以嵌入一个stack view到另一个stack view来构建更复杂的用户界面。

Xcode提供两种方法使用Stack View：

直接从Object library中拖出stack view（纵向或横向），然后把其他视图拖动stack view

选中一些视图，然后点击Interface Builder editor右下角一组按钮中的stack按钮

步骤

Assets.xcassets

Xcode中添加图片

image-20190304172810712

Lable布局

用Stack View布局title的label

  • 先拖入两个label。其一修改label的title为“Instant Developer”，字体大小为40 points，font style为medium，字体颜色为红色；其二修改label的title为“Get help from experts in 15 minutes”

  • 选择Main.storyboard，从Object library中拖出Vertical Stack View到storyboard中

    image-20190304203101381

  • 拖出两个label到stack view中。一旦label进入stack view中，它就自动调整大小以适应label。

  • 选择stack view，在属性检查器中修改Alignment参数为center，这样使stack view中的label水平居中对齐。

image-20190304200115680

stack view的几个属性：

  • axis stack view中对象是水平放置还是垂直放置，也就是Vertical Stack View和Horizontal Stack View之间的切换
  • alignment stack view中对象的对齐方式
  • distribution

image-20190304201258733

image布局

  • 拖动三个image view对象。并修改其image属性为user1，user2，user3。粗略调整图片的带下，放在一个水平，大概如下：

image-20190304201837314

  • 选中三个image view，击Interface Builder editor右下角一组按钮中的stack按钮，则生成一个新的horizontal stack view。

    image-20190304204500434

  • 修改新生成的horizontal stack view的属性，spacing为 10，表示图片之间的间距，Distribution为Fill Equally

    image-20190304204608044

组合stack view后添加布局约束

  • 同时选中两个stack view，点击stack 按钮，再生成一个新的大vertical stack view

  • 选中大的stack view，添加space constraints，上，左右，分别为70，0，0

  • 添加约束后，如果出现布局问题，可通过issue indicator解决：点击问题

  • 看预览assistant editor，查看其它设备会发现两个问题：

    • Instant Developer label文本在小屏幕设备被截断

    • 图片的宽高比改变了

      image-20190304211522517